/**
 * 档案归还----查询条件
 */
import React from "react";
import PropTypes from "prop-types";
import { routerRedux } from "dva/router";
import { Row, Col, Button, Input, Form, Select, DatePicker } from "antd";
import styles from "./index.less";

const Option = Select.Option;
const FormItem = Form.Item;
const { RangePicker, MonthPicker } = DatePicker;
let createdTime = ""; //收件日期
let notarizationAt = ""; //公证日期
const formItemLayout = {
  labelCol: { span: 7 },
  wrapperCol: { span: 17 }
};
const Filter = ({
  form: { validateFields, getFieldsValue, getFieldDecorator, getFieldValue },
  handleSearch
}) => {
  const params = {
    createdTime,
    notarizationAt,
    documentYear: getFieldValue("documentYear") || "",
    notarialMatters: getFieldValue("notarialMatters") || "",
    state: getFieldValue("state") || "",
    applyName: getFieldValue("applyName") || "",
    contractorUserName: getFieldValue("contractorUserName") || "",
    createdUserName: getFieldValue("createdUserName") || "", 
  };

  const handleSubmit = () => {
    handleSearch(params);
  };

  //收件日期
  const onChangeCreate = (date, dateString) => {
    if (date && dateString) {
      createdTime = dateString
    }
  };
 //公证日期
  const onChangeNotariza = (date, dateString) => {
    if (date && dateString) {
      notarizationAt = dateString
    }
  };
  return (
    <div className={styles.filterContent}>
      <h2 className={styles.searchTerm}>查询条件</h2>
      <Form>
        <Row type="flex" justify="space-between">
          <Col span={6}>
            <FormItem {...formItemLayout} label="档案年度">
              {getFieldDecorator("documentYear")(
                <Select style={{ width: "100%" }}>
                  <Option key="2018" value="2018">
                    2018
                  </Option>
                  <Option key="2017" value="2017">
                    2017
                  </Option>
                  <Option key="2016" value="2016">
                    2016
                  </Option>
                  <Option key="2015" value="2015">
                    2015
                  </Option>
                  <Option key="2014" value="2014">
                    2014
                  </Option>
                  <Option key="2013" value="2013">
                    2013
                  </Option>
                  <Option key="2012" value="2012">
                    2012
                  </Option>
                  <Option key="2011" value="2011">
                    2011
                  </Option>
                  <Option key="2010" value="2010">
                    2010
                  </Option>
                </Select>
              )}
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem {...formItemLayout} label="公证事项">
              {getFieldDecorator("notarialMatters")(
                <Select style={{ width: "100%" }}>
                  <Option key="公证事项1" value="公证事项1">
                    公证事项1
                  </Option>
                  <Option key="公证事项2" value="公证事项2">
                    公证事项2
                  </Option>
                  <Option key="公证事项3" value="公证事项3">
                    公证事项3
                  </Option>
                  <Option key="公证事项4" value="公证事项4">
                    公证事项4
                  </Option>
                  <Option key="公证事项5" value="公证事项5">
                    公证事项5
                  </Option>
                </Select>
              )}
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem {...formItemLayout} label="档案状态">
              {getFieldDecorator("state")(
                <Select style={{ width: "100%" }}>
                  <Option value="1">已归档</Option>
                  <Option value="0">未归档</Option>
                </Select>
              )}
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem {...formItemLayout} label="申请人">
              {getFieldDecorator("applyName")(
                <Input placeholder="请输入申请人" />
              )}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={6}>
            <FormItem {...formItemLayout} label="收件日期">
              {getFieldDecorator("createdTime")(
                <DatePicker style={{ width: "100%" }} onChange={onChangeCreate} />
              )}
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem {...formItemLayout} label="公证日期">
              {getFieldDecorator("notarizationAt")(
                <DatePicker style={{ width: "100%" }} onChange={onChangeNotariza} />
              )}
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem {...formItemLayout} label="承办人">
              {getFieldDecorator("contractorUserName")(
                <Input placeholder="请输入档案标题" />
              )}
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem {...formItemLayout} label="建档人">
              {getFieldDecorator("createdUserName")(
                <Input placeholder="请输入档案标题" />
              )}
            </FormItem>
          </Col>
        </Row>
      </Form>
      <Row type="flex" justify="center">
        <Col span={2}>
          <Button className={styles.btn} type="primary" onClick={handleSubmit}>
            查询
          </Button>
        </Col>
      </Row>
    </div>
  );
};

Filter.propTypes = {
  location: PropTypes.object,
  dispatch: PropTypes.func
};

export default Form.create()(Filter);
